// 模块最外部元素样式(阴影形)
@mixin cardBg {
    background-color: #fff;
}

// 清除浮动
@mixin clearfix {
    &:after {
        content: "";
        display: table;
        clear: both;
    }
}

// 多个子元素中间的分割线(可上可下)
@mixin line($direction: top, $background: $border-color, $size: 40px) {
    content: '';
    width: calc(100% - #{$size});
    height: 1px;
    position: absolute;
    @if $direction == top {
        top: 0;
    } @else if $direction == bottom {
        bottom: 0;
    }
    left: $size / 2;
    background-color: $background;
}

// flex拉伸
@mixin flex-spread {
    flex: 1;
    width: 0;
}

// 防误触遮罩
@mixin click-mask {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 100;
}

// 生成 acss 选择器
/// @param  {string}  $sel
@mixin iClass($sel) {
    [i-class~=#{$sel}] {
        @content;
    }
}

// 生成相邻选择器
/// @param  {string}  $sel
@mixin brother($sel: &) {
    & + #{$sel} {
        @content;
    }
}

// pre 内容
@mixin pre-content {
    font-size: 16px;
    font-family: -apple-system,BlinkMacSystemFont,PingFang SC,Segoe UI,Helvetica Neue,Helvetica,Hiragino Sans GB,Microsoft YaHei,Arial,sans-serif;
    color: #555;
    margin-top: 16px;
    line-height: 28px;
    white-space: pre-wrap;
}

// 单行文本溢出省略号
@mixin ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

// 多行文本溢出省略号
@mixin clamp-line($line: 2) {
    // 只兼容 -webkit- 浏览器
    display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: $line;
    -webkit-box-orient: vertical;
}
